<template>

	<div>
		<VueGalleryPictures :items="items" :box-container-class="boxContainerClass" :box-init-ratio="boxInitRatio"
		lastLineMode="origin" @loaded="loaded" @error="error" @click="test">
			<template>
				<span></span>
			</template>
		</VueGalleryPictures>
		
		<div class="more">
			<button @click="add_more">更多</button>
		</div>
	</div>



</template>
<script src="./gallery/vue-gallery-pictures.min.js"></script>
<script>
	import VueGalleryPictures from './gallery/GalleryPictures.vue';
	import {get_detail} from '../../API/get_detail.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			VueGalleryPictures,
		},
		data() {
			return {
				items: [],
				boxContainerClass: 'box-container-margin',
				boxInitRatio: 200,
				shownpics:0,
			}
		},
		computed: {
			...mapState(['gallery_arr', 'items_x']),
			follow_gallery_arr(){
				return this.gallery_arr;
			},
			follow_items_x(){
				return this.items_x
			}
		},
		methods: {
			loaded() {},
			error() {},

			test(msg) {
				get_detail(msg.id).then(res=>{
					console.log()
					this.$router.push({
						name: 'Detail',
						query:{
							item:res.data.data
						}
					})
				})

			},
			add_more(){
				// this.$store.dispatch('slice_gallery_item');
				this.change_shownpics();
				let temp = this.gallery_arr.slice(0, this.shownpics);
				
				temp = temp.map(el => {
					return {
						id: el.photo_id,
						src: el.thumb_w_url_cos,
						loading: true,
						error: false,
						ratio: el.origin_w / el.origin_h,
					}
				})
				console.log(temp);
				this.items.push(...temp);
			},
			change_shownpics(){
				this.shownpics += 10;
			},
			origin_shownpics(){
				this.shownpics = 0;
			}
		},
		created() {
			
		},
		watch:{
			follow_gallery_arr(){
				// this.$store.dispatch('slice_gallery_item');
				
				this.change_shownpics();
				
				let temp = this.gallery_arr.slice(0, this.shownpics);
				
				temp = temp.map(el => {
					return {
						id: el.photo_id,
						src: el.thumb_w_url_cos,
						loading: true,
						error: false,
						ratio: el.origin_w / el.origin_h,
					}
				})
				
				this.items = temp;
				console.log(this.items);
			},
			follow_items_x(){
				// this.items = this.items_x;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .gallery-layout-box {
		padding: 2%;
	}

	::v-deep .gallery-pic-box-container {
		overflow: hidden;

		img {
			transition: all .5s;
		}
	}

	::v-deep .gallery-pic-box-container:hover {
		overflow: hidden;

		img {
			transform: scale(1.2);
		}
	}
	.more{
		button{
			width: 162px;
			line-height: 40px;
			border-radius: 20px;
			margin: 38px auto;
		}
	
	}
</style>
